<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<person :name="name" :gender="gender" :age="age"></person>
		</div>
		
		
	</body>
	<script src="vue.js"></script>
	<script type="text/html" id="person">
		<div>
			<p>姓名:{{name}}</p>
			<p>性别:{{gender}}</p>
			<p>年龄:{{age}}</p>
			<p>身高:{{height}}</p>
			<p>配偶:姓名-{{lover.name}},年龄={{lover.age}}</p>
		</div>
	</script>
	<script>
		Vue.component("person",{
			template:"#person",
			//props可以设置为对象来显示传值的类型。
			props:{
				name:String,
				gender:[Boolean,String],
				age:{
					type:Number,
					required:true,
					validator:function(value){
						return value>0;
					}
				},
				height:{
					type:Number,
					default:170
				},
				lover:{
					type:Object,
					default:function(){
						return {
							name:"李四",
							age:34
						}
					}
				}
			}
		});
		
		var app = new Vue({
			el:"#app",
			data:{
				name:"张三",
				gender:"男",
				age:23,
			}
		});
		
		
		
	</script>
</html>
